// IE polyfill
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'

import React from 'react'
import { BrowserRouter, HashRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
// redux
import appReducers from './redux/reducers'
import appEffects from './redux/effects'
// 布局
import Layouts from './layouts/index'
// 路由
import Routers from './routes'

import config from '@/config'
const { routerMode, basename } = config

// redux调试工具
const composeEnhancer =
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
// 创建 saga middleware
const sagaMiddleware = createSagaMiddleware()
// 注入 saga middleware
const enhancer = applyMiddleware(sagaMiddleware) as any
// 创建 store
const store = createStore(appReducers, composeEnhancer(enhancer))
// 启动 saga
sagaMiddleware.run(appEffects)

function App() {
  return (
    <Provider store={store}>
      {routerMode === 'browser' ? (
        <BrowserRouter basename={basename}>
          <Layouts>
            <Routers />
          </Layouts>
        </BrowserRouter>
      ) : (
        <HashRouter>
          <Layouts>
            <Routers />
          </Layouts>
        </HashRouter>
      )}
    </Provider>
  )
}

export default App
